<template>
  <div class="categories-container">
    <template v-for="(item, index) in categories" :key="item.id">
      <div class="categoryItem" @click="clickItem(index)">
        <img :src="item.pictureUrl" alt="">
        <div class="text" :class="{ active: currentIndex == index }">{{ item.title }}
        </div>
      </div>
    </template>

  </div>
</template>

<script setup>
import useHomeStore from '@/stores/modules/home';
import { storeToRefs } from 'pinia';
import { ref } from 'vue'
const homeStore = useHomeStore()
const { categories } = storeToRefs(homeStore)
const currentIndex = ref(0)
const clickItem = (index) => {
  currentIndex.value = index
}
</script>

<style lang="less" scoped>
.categories-container {
  display: flex;
  overflow-x: auto;
  height: 80px;
  padding: 0 10px;
  margin-top: 8px;

  .active {
    width: 100%;
    color: var(--primary-color);
    font-weight: 700;

    &::before {
      content: " ";
      position: absolute;
      bottom: -5px;
      border: 1px solid var(--primary-color);
      background-color: var(--primary-color);
      width: 33px;
      height: 0;
      left: 18px;
      transition: all .2s linear;
    }

  }

  &::-webkit-scrollbar {
    // 隐藏滚动条
    display: none;
  }

  .categoryItem {
    width: 70px;
    text-align: center;
    flex-shrink: 0; //默认flex布局会压缩

    img {
      height: 32px;
      width: 32px;
    }

    .text {
      font-size: 12px;
      margin-top: 8px;
      position: relative;
    }


  }



}
</style>